<template>
  <div class="layout-list-item-wrapper" @click="handleItemClick">
    <div class="left-wrapper">
      <slot name="img">
        <div class="img-vr">
          <el-image fit="cover" :src="imgUrl" />

          <slot name="vrIcon">
            <div class="vr">
              <i class="iconfont icon-lifangti" />
              <span class="vr-name">VR全景</span>
            </div>
          </slot>
        </div>
      </slot>
    </div>

    <div class="right-wrapper">
      <slot name="name">
        <div class="item-name">{{ name }}</div>
      </slot>

      <slot name="addrs">
        <div class="item-addrs">
          <i class="el-icon-location-information" />
          <div class="addrs">{{ addrs }}</div>
        </div>
      </slot>

      <slot name="tags">
        <div class="item-tags">
          <div v-for="item in tags" :key="item" class="item-tag">{{ item }}</div>
        </div>
      </slot>

      <slot name="baseInfo">
        <div class="item-base-info">
          <div v-for="item in baseInfoList" :key="item.label" class="label-value-unit">
            <div>{{ item.label }}：</div>
            <div>{{ item.value }}</div>
            <div v-if="item.unit">{{ item.unit }}</div>
          </div>
        </div>
      </slot>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {},
  props: {
    dataObj: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {}
  },
  computed: {
    imgUrl() {
      const imgList = this.dataObj?.data?.imgList
      return (imgList && imgList[0] && imgList[0].url) || 'https://iph.href.lu/254x160'
    },
    name() {
      return this.dataObj.data?.name || '--'
    },
    addrs() {
      return this.dataObj.data?.addrs || '--'
    },
    tags() {
      const { typeLabel, tags } = this.dataObj.data || {}
      const arr = []
      typeLabel && arr.push(typeLabel)
      if (Array.isArray(tags) && tags.length > 0) {
        arr.push(...tags)
      }
      return arr
    },
    baseInfoList() {
      const { area, price, sellTypeLabel } = this.dataObj.data || {}
      const arr = [
        {
          label: '土地面积',
          value: '--',
          unit: '亩',
        },
        {
          label: '出让价格',
          value: '--',
          unit: '万元/亩',
        },
        {
          label: '出让形式',
          value: '--',
          unit: '',
        },
      ]

      area && (arr[0].value = area)
      price && (arr[1].value = price)
      sellTypeLabel && (arr[2].value = sellTypeLabel)

      return arr
    },
  },
  methods: {
    handleItemClick() {
      this.$emit('click', this.dataObj.id)
    },
  },
})
</script>
<style lang="scss" scoped>
.layout-list-item-wrapper {
  @apply flex py-[20px] mx-[20px] border-[#e0e4ed] border-b-[1px] cursor-pointer;

  .left-wrapper {
    .img-vr {
      @apply relative;
      .el-image {
        @apply w-[254px] h-[160px] rounded-md;
      }
      .vr {
        @apply absolute
        top-4 right-4 bg-primary
        rounded-md py-1 px-2 flex space-x-2;

        .icon-lifangti {
          @apply text-white;
        }

        .vr-name {
          @apply text-white;
        }
      }
    }
  }

  .right-wrapper {
    @apply pl-[30px] flex flex-col justify-between;

    .item-name {
      @apply text-[#333C57] text-[20px];
    }

    .item-addrs {
      @apply text-[#888ea9] flex items-center;

      .addrs {
        @apply ml-2;
      }
    }

    .item-tags {
      @apply flex space-x-4;

      .item-tag {
        @apply bg-[#e5f0ff] py-1 px-4 text-[#006eff]  rounded-[4px];
      }
    }

    .item-base-info {
      @apply flex text-[#888EA9] space-x-8;

      .label-value-unit {
        @apply flex;
      }
    }
  }
}
</style>
